<script setup>
import { computed,ref } from "vue"

//total总页数，current当前页
let props = defineProps(['total','current'])
let emit = defineEmits(['update:current'])

//当前页
let p = ref(props.current);

//开始页码数
let start = computed(()=>{
    if(props.total-p.value<4){
        return props.total>9?props.total-8:1;
    }else{
        return p.value>4?p.value-4:1;
    }
})

//显示页码数量
let num = computed(()=>props.total>9?9:props.total);

//上一页
function prev(){
    if(p.value>1){
        p.value--;
        emit('update:current',p.value);
    }
}

//下一页
function next(){
    if(p.value<props.total){
        p.value++;
        emit('update:current',p.value);
    }
}

//显示“上一页”
let first = computed(()=>{
    return p.value>1;
})

//显示“下一页”
let end = computed(()=>{
    return p.value<props.total;
})

//选择某一页
function sel(n){
    p.value=n;
    emit('update:current',n);
}
</script>
<template>
    <div class="ipage">
        <span class="prev" v-show="first" @click="prev">上一页</span>
        <ul class="pages">
           <li v-for="i in num" :key="i" :class="i+start-1==p?'cur':''" @click="sel(i+start-1)">{{ i+start-1}}</li>
        </ul>
        <span class="next" v-show="end" @click="next">下一页</span>
        <span>共{{total}}页</span>
    </div>
</template>
<style scoped>
.ipage{
    display: flex;
    gap:2px;
    color:#333;
    justify-content: center;
    padding:10px 0;
    user-select: none;
    height: 30px;
    display: flex;
    align-items: center;
}
.ipage>span{
    background-color:#eee;
    padding:2px 5px;
    cursor: pointer;
}
.pages{
    list-style: none;
    display: flex;
    gap:2px;
}
.pages>li{
    height:20px;
    background-color:#eee;
    padding:2px 5px;
    cursor: pointer;
}
.cur{
    background-color:rgb(121, 124, 153) !important;
    color:white;
}
</style>